<script setup lang="ts">
import { taskStore } from "../../store/modules/task";
import {
  reTaskupdateStatus,
  reTaskdelete,
  reTasknow,
} from "../../api/tasks/index";
import { ref } from "vue";
import dayjs from "dayjs";
import { reTaskupdate } from '../../api/tasks/index';
import { number } from "echarts";
const taskState = taskStore();

const openDialog = () => {
  taskState.openDialog(); // 不传参数则使用当前时间
};
const taskTypeOptions = [
  { label: "学习" },
  { label: "运动" },
  { label: "工作" },
  { label: "娱乐" },
  { label: "自定义" },
];

const showflag = ref(false);

let nowtaskId = ref();

let taskForm = ref();

let date1 = ref();
let date2 = ref();

//编辑函数
const handleEdit = async (id: number) => {
  const result = await reTasknow(id);

  taskForm.value = result.data;
  console.log(taskForm.value.taskTime);
  
  date1.value = dayjs(taskForm.value.taskTime).format("YYYY-MM-DD");
  date2.value = taskForm.value.taskTime;
  console.log(date2.value);
  
  showflag.value = true;
  nowtaskId.value = id;
};

// 删除事务
const handleDelete = async (id: number) => {
  await reTaskdelete(id);
  taskState.getTaskList();
};

//状态修改
const handleStatusChange = async (id, comleted) => {
  if(comleted === 1){
    comleted =-1
  }else {
    comleted =1
  }
  await reTaskupdateStatus(id, comleted);
  await taskState.getTaskList();
};

const handleDialogClose = async () => {
  showflag.value = false;
};

//提交编辑事务
const submitForm = async () => { 
    await reTaskupdate(taskForm.value);
    taskState.getTaskList();
    showflag.value = false;
};
</script>

<template>
  <div class="list-container">
    <div class="header">
      <el-button type="primary" @click="openDialog">新建任务</el-button>
    </div>

    <!-- 任务列表展示 -->
    <el-table :data="taskState.taskList" style="width: 100%">
      <el-table-column prop="taskTime" label="时间" />
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="content" label="内容" width="300" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="estimatedDuration" label="花费时长" />
      <el-table-column label="完成状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.comleted"
            :active-value="1"
            active-text="已完成"
            @click="handleStatusChange(scope.row.id, scope.row.comleted)"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row.id)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 编辑弹窗 -->
  <el-dialog
    v-model="showflag"
    title="添加新任务"
    @closed="handleDialogClose()"
  >
    <el-form :model="taskForm" label-width="120px">
      <el-form-item label="任务标题" required>
        <el-input v-model="taskForm.title" placeholder="请输入任务标题" />
      </el-form-item>

      <el-form-item label="任务类型" required>
        <el-select
          v-model="taskForm.type"
          placeholder="请选择任务类型"
          style="width: 100%"
        >
          <el-option
            v-for="option in taskTypeOptions"
            :key="option.label"
            :label="option.label"
            :value="option.label"
          />
        </el-select>

        <el-input
          v-if="!['学习', '工作', '娱乐', '运动'].includes(taskForm.type)"
          v-model="taskForm.type"
          placeholder="请输入自定义类型"
          style="margin-top: 10px"
        />
      </el-form-item>

      <el-form-item label="任务内容">
        <el-input
          v-model="taskForm.content"
          type="textarea"
          :rows="3"
          placeholder="请输入任务详细内容"
        />
      </el-form-item>

      <el-form-item label="任务时间" required>
        <el-col :span="11">
          <el-form-item prop="taskForm.taskTime">
            <el-date-picker
              v-model="date1"
              value-format="YYYY-MM-DD "
              type="date"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col class="text-center" :span="2">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="date2" style="width: 100%" />
        </el-col>
      </el-form-item>

      <el-form-item label="预计时长" required>
        <el-input-number
          v-model="taskForm.estimatedDuration"
          :min="0.5"
          :max="24"
          :step="0.5"
          controls-position="right"
        />
        <span class="duration-unit">小时</span>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="showflag = false">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.list-container {
  padding: 20px;

  .header {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
